<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"></div>
<script>
    var box=document.querySelector("#box");
    //事件监听  绑定事件
    //可以给一个对象绑定多个同样的事件
    box.addEventListener("click",function(){},false);
    //冒泡  默认值时false
    function boxClick(){
        box.removeEventListener("click",boxClick);//移除事件
    }
    box.addEventListener("click",boxClick,true);//捕获

    box.attachEvent("onmouseover",function(){});//ie 6-10支持 事件监听
    function boxMouseover(){
        box.detachEvent("onmouseover",boxMouseover)//移除事件
    }
    box.attachEvent("onmouseover",boxMouseover)

    box.onclick=function(){//绑定事件
        box.onclick=null;//移除事件
    }

    box.onclick=function(e){
        e=e||window.event;
        e.target//真正出发的那个元素  兼容性问题
        e.srcElement//真正出发的那个元素 ie浏览器
        var targrt= e.target|| e.srcElement
        e.currentTarget;//和this是一样的 指的是所绑定的那个对象
        e.eventPhase;//获取事件阶段的3个值1 捕获 2 目标 3冒泡
        e.clientX;//获取鼠标在浏览器可视区域的横坐标  比如固定定位
        e.clientY;//获取鼠标在浏览器可视区域的纵坐标
        e.pageX;//获取鼠标在页面上的横坐标 包括滚动出去的距离  比如绝对定位
        e.pageY;//获取鼠标在页面上的纵坐标
        document.body.scrollLeft//获取页面滚动出去距离left距离 ie浏览器
        document.body.scrollTop//获取页面滚动出去距离top距离  ie浏览器
        document.documentElement.scrollLeft//获取页面滚动出去距离left距离
        document.documentElement.scrollTop//获取页面滚动出去距离top距离

        var pagey=document.body.scrollTop+ e.clientY;


        box.offsetLeft//盒子距离最近带有定位的父元素的左侧距离
        box.offsetTop//盒子距离最近带有定位的父元素的上侧距离
    }


</script>
</body>
</html>